import React, { useState } from 'react';
import { Switch, Radio, Input } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
import { debounce, filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const CoreCustomQuota = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ isShowLabel, setLabel ] = useState( ( config.style && config.style.isShowLabel === false ) ? false : true );
	const [ valueUnitVisible, setValueUnitVisible ] = useState( ( config.style && config.style.valueUnitVisible ) || false );

	const [ valueSplitStyle, setValueSplitStyle ] = useState( config.style.valueSplitStyle || 'thousand' );
	const [ valueUnit, setValueUnit ] = useState( ( config.style && config.style.valueUnit ) || '' );
	const [ labelValue, setLabelValue ] = useState( ( config.style && config.style.labelValue ) || '' );


	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic', 'AlignHor'
	];

	const onChange = ( checked: boolean ) => {
		setLabel( checked );
		form.setFieldsValue( { isShowLabel: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const onValueUnitVisibleChange = ( checked: boolean ) => {
		setValueUnitVisible( checked );
		form.setFieldsValue( { valueUnitVisible: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleValueSplit = ( event ) => {
		setValueSplitStyle( event.target.value );
		form.setFieldsValue( { valueSplitStyle: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const setDataUnit = ( event ) => {
		setValueUnit( event.target.value );
		form.setFieldsValue( { valueUnit: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleInput = ( event ) => {
		debounce( ( event ) => setDataUnit( event ), 500 );
	};

	const handleLabelValueChange = ( event ) => {
		debounce( ( event ) => setLabelValue( event ), 500 );
	};

	return (
		<div>
			<FormItem label="名称是否显示" name="isShowLabel" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLabel } onChange={ onChange }/>
			</FormItem>

			<FormItem label="指标名称" name="labelValue" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Input value={ labelValue } onChange={ handleLabelValueChange } placeholder="请输入指标名称"></Input>
			</FormItem>

			<FormItem label="指标字体" name="labelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="labelFontFamily"
					fontSizeName="labelFontSize"
					fontColorName="labelFontColor"
					boldName="labelFontBold"
					italicName="labelFontItalic"
					alignHorName="labelAlignHor"
					fontConfig={ fontConfig }
				/>
			</FormItem>

			<FormItem label="指标值字体" name="valueFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="valueFontFamily"
					fontSizeName="valueFontSize"
					fontColorName="valueFontColor"
					boldName="valueFontBold"
					italicName="valueFontItalic"
					alignHorName="valueAlignHor"
					fontConfig={ fontConfig }
				/>
			</FormItem>

			<FormItem label="值分割方式" name="valueSplitStyle" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Radio.Group value={ valueSplitStyle } defaultValue={ valueSplitStyle } onChange={ handleValueSplit }>
					<Radio.Button value="thousand">千分位</Radio.Button>
					<Radio.Button value="tenThousand">万分位</Radio.Button>
				</Radio.Group>
			</FormItem>

			<FormItem label="值单位是否显示" name="valueUnitVisible" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ valueUnitVisible } onChange={ onValueUnitVisibleChange }/>
			</FormItem>

			{
				valueUnitVisible && (
					<FormItem label="值添加单位" name="valueUnit" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Input placeholder="请输入单位" value={valueUnit} onChange={ handleInput }/>
					</FormItem>
				)
			}

		</div>
	);
};

export default React.memo( CoreCustomQuota );
